[HTML] 테이블 태그에서 colspan 최대 값 설정하기, table colspan

HTML 테이블 태그를 사용하는 경우 만약 colspan 또는 rowspan의 최대값을 설정하는 방법에 대하여 알아봅니다.

# HTML table 태그의 colspan 최대값 설정하기

rowspan 역시 colspan 설정 방법과 동일하므로 colspan의 방법에 대하여 알아봅니다.

! 먼저 rowspan, colspan은 무엇이고 언제 최대값이 필요할까요?

테이블 태그는 여러개의 셀(cell) 단위로 구성되어 있습니다. 이때 각각의 셀을 병합하는 방법으로 rowspan, colspan이 사용됩니다. 두 개 모두 합치는 목적으로 사용되나 row, span 즉 행 또는 열을 합칠때 사용하는 속성이 다릅니다.

colspan 최대값 설정은 언제 필요한가?
colspan의 값을 최대값으로 설정하는 경우가 언제 있을까요? 테이블의 내용이 없는 경우가 대표적입니다. 예를들어 '데이터가 존재하지 않습니다.'와 같은 문구를 출력하기 위해서 사용할 수 있습니다. 아래와 같겠죠.

@ 테이블 값이 있는 경우


@ 테이블 값이 없어 colspan을 사용한 경우


여기서 최대 컬럼의 개수가 3개이므로 colspan="3"을 사용하면 됩니다. 하지만 문제는 컬럼의 개수가 다이나믹하게 변경되는 경우입니다. 이런 경우에는 반드시 최대값을 설정해야 하겠죠.

! 테이블 colspan 최대값 설정 방법

이제 방법을 알아봅니다. 먼저 colspan="20" 처럼 그냥 많은 값을 설정해도 가능합니다. 하지만 이게 최선의 방법일까요? 그래서 흔히 사용되는 방법이 바로 아래와 같이 적용하는 방법입니다.

이 방법은 두 가지 요구사항을 만족합니다. 일단 컬럼의 최대 개수가 100을 넘지 않을 것이므로 최대값으로 만족하고 또한 코드에서 시맨틱하게 적용되어 보다 쉽게 이해할 수 있습니다.

참고로 colspan="100%"는 colspan="100"의 결과가 서로 동일합니다.